<template>
    <div>
        <Echart :options="state.option" :height="300" />
    </div>
</template>
<script lang="ts" setup>
import { Echart } from '@/components/Echart'
import { ref, reactive, unref, onMounted, watch } from "vue"
const state = reactive({
    option: {
        title: {
            text: '招聘流程数据统计图'
        },
        tooltip: {
            trigger: 'item',
            formatter: function (value) {
                return `${value.data.name} : ${value.data.number}`
            }
        },
        color: ["#1d477e", "#275a9c", "#2f6cbc", "#468de9", "#6eabfa", "#cee3fd"],
        series: [
            {
                name: '数据',
                type: 'funnel',
                left: '2%',
                top: 60,
                bottom: 60,
                width: '80%',
                min: 0,
                max: 100,
                minSize: '20%',
                maxSize: '100%',
                sort: 'descending',
                gap: 2,
                label: {
                    show: true,
                    position: 'inside',
                    formatter: function (value) {
                        console.log(value.data.number);
                        return `${value.data.number}`

                    }
                },
                labelLine: {
                    length: 10,
                    lineStyle: {
                        width: 1,
                        type: 'solid'
                    }
                },
                itemStyle: {
                    borderColor: '#fff',
                    borderWidth: 1
                },
                emphasis: {
                    label: {
                        fontSize: 20
                    }
                },
                data: []
            },
            {
                name: '数据',
                type: 'funnel',
                left: '2%',
                top: 60,
                bottom: 60,
                width: '80%',
                min: 0,
                max: 100,
                minSize: '20%',
                maxSize: '100%',
                sort: 'descending',
                gap: 2,
                label: {
                    show: true,
                    position: 'outside',
                },
                labelLine: {
                    length: 30,
                    lineStyle: {
                        width: 1,
                        type: 'solid'
                    }
                },
                itemStyle: {
                    borderColor: '#fff',
                    borderWidth: 1
                },
                emphasis: {
                    label: {
                        fontSize: 20
                    }
                },
                data: []
            }
        ]
    } as any
})
const props = defineProps({
    data: {
        type: Array,
        default: () => {
            return []
        }
    }
})
watch(() => props.data, (newValue: any) => {
    let data = [
        { value: 60, name: '初筛人数', number: newValue[0].initialScreening },
        { value: 50, name: '笔试人数', number: newValue[0].departmentScreening },
        { value: 40, name: '面试人数', number: newValue[0].writtenExamination },
        { value: 30, name: '体检审查人数', number: newValue[0].interview },
        { value: 20, name: '待入职人数', number: newValue[0].toBeHired },
        { value: 10, name: '入职人数', number: newValue[0].entry },
    ]
    state.option.series[0].data = data
    state.option.series[1].data = data
}, { deep: true })
onMounted(() => {
    let data = [
        { value: 60, name: '初筛人数', number: 0 },
        { value: 50, name: '笔试人数', number: 0 },
        { value: 40, name: '面试人数', number: 0 },
        { value: 30, name: '体检审查人数', number: 0 },
        { value: 20, name: '待入职人数', number: 0 },
        { value: 10, name: '入职人数', number: 0 },
    ]
    state.option.series[0].data = data
    state.option.series[1].data = data
})

</script>

<style lang="less" scoped></style>